// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likemarket/likeshopv2
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------


<template>
    <div class="goods-details" v-if="!isFirstLoading">
        <div class="app-load row-between bg-white" v-if="isFromApp">
            <div class="row">
                <img src="@A/images/shop_logo.png" alt />
                <div class="ml10">多商户电商平台</div>
            </div>
            <button
                class="br60 bg-primary white"
                size="xs"
                @click="$getAppDownload()"
            >
                app下载
            </button>
        </div>
        <product-swiper :imgList="swiperList"></product-swiper>
        <div class="goods-info bg-white">
            <div class="count-down row-between" v-if="activity.type == 1">
                <div class="price white row">
                    <div class="mr10">
                        <price-slice
                            :showSubscript="true"
                            :price="checkedGoods.price || goodsDetail.price"
                            :weight="700"
                            first-class="first-price"
                            second-class="xxl"
                        ></price-slice>
                    </div>
                    <div class="line-through white md">
                        <price-slice
                            :showSubscript="true"
                            :price="
                                checkedGoods.market_price ||
                                goodsDetail.market_price
                            "
                        ></price-slice>
                    </div>
                </div>
            </div>
            <div class="info-header row" v-else>
                <div class="price row" style="flex: 1">
                    <div class="primary mr10">
                        <price-slice
                            :showSubscript="true"
                            :price="checkedGoods.price || goodsDetail.price"
                            :weight="700"
                            first-class="first-price"
                            second-class="xxl"
                        ></price-slice>
                    </div>
                    <div class="line-through muted md">
                        <price-slice
                            :showSubscript="true"
                            :price="
                                checkedGoods.market_price ||
                                goodsDetail.market_price
                            "
                        ></price-slice>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="goods-name lg bold" style="flex: 1">
                    {{ goodsDetail.name }}
                </div>
                <img
                    v-if="activity.type == 1"
                    class="icon-share"
                    @click="showShare = true"
                    src="@A/images/icon_share.png"
                />
            </div>
            <div class="row-between xs lighter" style="padding: 0 0.32rem 10px">
                <span v-if="goodsDetail.stock !== true"
                    >库存: {{ checkedGoods.stock || goodsDetail.stock }}件</span
                >
                <span>销量: {{ goodsDetail.sales_sum }}件</span>
                <span>浏览量: {{ goodsDetail.click_count }}次</span>
            </div>
        </div>
        <div
            class="coupons row mt10 bg-white"
            style="align-items: flex-start"
            @click="showCoupons = true"
             v-if="couponLists.length"
        >
            <div class="text muted">优惠</div>
            <div class="con" style="flex: 1">
                <div class="row" style="flex: 1">
                    <van-tag plain :color="primaryColor">领券</van-tag>
                    <div class="row ml10" style="flex: 1">
                        <div
                            class="coupons-item primary mr10"
                            v-for="(item, index) in couponLists"
                            :key="item.id"
                        >
                            <div v-if="index < 2" class="row xs">
                                {{ item.use_condition }}
                            </div>
                        </div>
                    </div>
                    <img class="icon-sm" src="@A/images/arrow_right.png" />
                </div>
            </div>
        </div>
        <div class="evaluation bg-white mt10" >
            <div
                class="title row-between"
                @click="goPage('userEvaluate', { id: goodsDetail.id })"
            >
                <div>
                    <span class="balck md mr10">用户评价</span>
                    <span class="primary sm"
                        >好评率{{ comment.goods_rate  || "0%"}}</span
                    >
                </div>
                <div class="row">
                    <span class="lighter">查看全部</span>
                    <img class="icon-sm" src="@A/images/arrow_right.png" />
                </div>
            </div>
            <div class="con" v-if="comment.goods_rate">
                <div class="user-info row" >
                    <img class="avatar mr10" :src="comment.avatar" />
                    <div class="user-name md mr10">{{ comment.nickname }}</div>
                </div>
                <div class="muted xs mt10">
                    <span class="mr10">{{ comment.create_time }}</span>
                </div>
                <div v-if="comment.comment" class="dec mt20">
                    {{ comment.comment }}
                </div>
            </div>
             <div class="con muted row-center" v-else>
                 暂无评价
             </div>
        </div>
        <goods-like class="mt10" v-if="goodsLike.length" :lists="goodsLike" />
        <div class="details mt10 bg-white">
            <div class="title lg">商品详情</div>
            <div class="content" v-html="goodsDetail.content"></div>
        </div>
        <div class="footer row bg-white">
            <div class="btn column-center" @click="goPage('contactOffical')">
                <img class="icon" src="@A/images/icon_contact.png" />
                <span class="xxs lighter">客服</span>
            </div>
            <div
                class="btn column-center"
                hover-class="none"
                bindtap="collectGoods"
                @click="$handleCollectGoods"
            >
                <img
                    class="icon"
                    :src="
                        goodsDetail.is_collect == 0
                            ? require('@A/images/icon_collection.png')
                            : require('@A/images/detail_icon_service.png')
                    "
                />
                <span class="xxs lighter">收藏</span>
            </div>
            <div class="btn column-center" @click="goPage('cart')">
                <img
                    class="icon"
                    :class="{ shaking: iconShaking }"
                    src="@A/images/icon_cart.png"
                />
                <span class="xxs lighter">购物车</span>
                <div v-if="cartNum" class="cart-num white xxs row-center">
                    {{ cartNum }}
                </div>
            </div>
            <div
                v-if="!activity.type == 1"
                class="addcart br60 white mr10 md ml10"
                @click="onShowSpec(1)"
            >
                加入购物车
            </div>
            <div class="right-buy br60 white mr10 md" @click="onShowSpec(2)">
                立即购买
            </div>
        </div>
        <goods-spec
            :show="showSpec"
            :show-add="popupType == 1"
            :show-buy="popupType == 2"
            :goods="goodsDetail"
            @close="showSpec = false"
            @change="onChangeSpec"
            @addcart="onAddCart"
            @buynow="onBuyNow"
        />
        <transition @after-leave="afterLeave" :duration="800" @after-enter="afterEnter" >
            <div v-show="showAnim" class="goods-ball" ref="goodsBall">
                <img class="inner-ball" :src="goodsDetail.image" />
            </div>
        </transition>
        <van-popup
            class="coupons-popup"
            v-model="showCoupons"
            position="bottom"
            round
            closeable
            @close="showCoupons = false"
        >
            <div class="title md bold">领券</div>
            <div class="content bg-gray">
                <coupon-list
                    :coupon-list="couponLists"
                    :is-coupon-center="true"
                    @receive="userReceiveCoupon"
                ></coupon-list>
            </div>
        </van-popup>
        <van-popup
            v-model="posterpopup"
            position="center"
            closeable
            class="code-popup"
            transition="fade"
        >
            <div class="content mb10">
                <img :src="shareImg" alt class="share-img" />
            </div>
            <div class="bg-primary row-center white save-btn">
                长按保存图片到相册
            </div>
        </van-popup>
    </div>
</template>

<script>
import Vue from "vue";
import ProductSwiper from "@C/ProductSwiper";
import PriceSlice from "@C/PriceSlice";
import GoodsSpec from "@C/GoodsSpec";
import CouponList from "@C/CouponList";
import GoodsLike from "@C/GoodsLike";
import {
    getGoodsDetail,
    getGoodsCoupon,
    addCart,
} from "@/api/store";
import { handleCollectGoods, getCoupon } from "@API/user";
import { getAppDownload } from "@API/app";
import { appSource } from "@U/utils";
import { mapState, mapActions } from "vuex";
const CollectType = {
    COLLECTION: 1,
    CANCEL_COLLECTION: 0,
};
export default {
    name: "goodsDetail",
    components: {
        ProductSwiper,
        PriceSlice,
        GoodsSpec,
        CouponList,
        GoodsLike,
    },
    data() {
        return {
            posterpopup: false,
            shareImg: "",
            timeData: {},
            swiperList: [],
            goodsDetail: {},
            checkedGoods: {},
            couponLists: [],
            goodsLike: [],
            isFirstLoading: true,
            showSpec: false,
            popupType: "",
            countTime: 0,
            activity: {},
            comment: {},
            showCoupons: false,
            isFromApp: this.$route.query.isapp,
            showAnim: false,
            iconShaking: false,
        };
    },

    async created() {
        this.id = this.$route.query.id;
        this.$getGoodsDetail();
        this.$getCoupons();
        this.getCartNum()
    },
    mounted() {},
    beforeDestroy() {
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
    },
    methods: {
        ...mapActions(['getCartNum']),
        $getAppDownload() {
            getAppDownload({ client: appSource() == "ios" ? 3 : 4 }).then(
                (res) => {
                    if (res.code == 1) {
                        window.location = res.data.line;
                    }
                }
            );
        }, 
        goPage(name, query) {
            this.$router.push({
                name,
                query,
            });
        },
        
        $getGoodsDetail() {
            getGoodsDetail({
                id: this.id,
            }).then((res) => {
                if (res.code == 1) {
                    let {
                        goods_image,
                        content,
                        comment,
                        like,
                        activity,
                    } = res.data;
                    this.goodsDetail = res.data;
                    this.swiperList = goods_image;
                    this.goodsLike = like;
                    this.countTime = activity.info
                        ? activity.info.end_time * 1000 - Date.now()
                        : 0;
                    this.activity = activity;
                    this.comment = comment;
                    this.isFirstLoading = false;
                } else {
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 500);
                }
            });
        },
        $getPoster() {
            this.$toast({
                type: "loading",
                message: "正在生成中...",
                duration: 0,
            });
            getPoster({
                id: this.id,
                url: `/mobile/common/goodsdetail?id=${this.id}`,
            }).then((res) => {
                this.$toast.clear();
                if (res.code == 1) {
                    this.shareImg = res.data;
                    this.posterpopup = true;
                }
            });
        },
        $getCoupons() {
            getGoodsCoupon({
                id: this.id,
            }).then((res) => {
                if (res.code == 1) {
                    this.couponLists = res.data;
                }
            });
        },
        userReceiveCoupon(id) {
            getCoupon({ id: id }).then((res) => {
                if (res.code == 1) {
                    this.$toast({ message: res.msg });
                    this.$getCoupons();
                }
            });
        },
        $handleCollectGoods() {
            let { is_collect, id } = this.goodsDetail;
            if (is_collect == CollectType.COLLECTION) {
                is_collect = CollectType.CANCEL_COLLECTION;
            } else {
                is_collect = CollectType.COLLECTION;
            }
            handleCollectGoods({ is_collect: is_collect, goods_id: id }).then(
                (res) => {
                    if (res.code == 1) {
                          if(is_collect == 1) {
                             this.$toast({ message: "收藏成功"});
                        }else {
                              this.$toast({ message: "取消收藏" });
                        }
                        this.$getGoodsDetail();
                    }
                }
            );
        },
        onShowSpec(type) {
            this.popupType = type;
            this.showSpec = true;
        },
        onChangeSpec(e) {
            this.checkedGoods = e;
        },
        onAddCart(e) {
            let { id, goodsNum } = e;
            addCart({
                item_id: id,
                goods_num: goodsNum,
            }).then((res) => {
                if (res.code == 1) {
                    this.iconShaking = false;
                    this.showSpec = false;
                    this.onControlAnim();
                    this.getCartNum()
                }
            });
        },
        onBuyNow(e) {
            let { id, goodsNum } = e;
            let goods = [
                {
                    item_id: id,
                    num: goodsNum,
                },
            ];
            this.showSpec = false;
            this.$nextTick(() => {
                this.$router.push({
                    name: "confirmOrder",
                    query: {
                        goods: JSON.stringify(goods),
                    },
                });
            });
        },
        // 控制动画方法
        onControlAnim() {
            const goodsBall = this.$refs.goodsBall;
            const innerBall = goodsBall.children[0];
            this.showAnim = true;
        },
        afterEnter(el) {
            this.showAnim = false;
        },
        afterLeave(el) {
            // 动画结束后
            this.iconShaking = true;
        },
    },
    computed: {
        ...mapState(['cartNum'])
    },
};
</script>
<style lang="scss" scoped>
/deep/.first-price {
    font-size: 23px;
}
.goods-details {
    padding-bottom: 50px;
    text-align: left;
    .app-load {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        z-index: 1;
        padding: 0 10px;
        img {
            width: 86px;
            height: 24px;
        }
    }
    .goods-info {
        position: relative;
        .count-down {
            height: 50px;
            background: #ffd4d8;
            padding: 0 10px 0 0;
            .price {
                background-image: url();
                width: 250px;
                height: 100%;
                background-size: 100%;
                padding-left: 12px;
            }
        }
        .info-header {
            padding: 10px 0 0 12px;
        }
        .icon-share {
            width: 67px;
            height: 30px;
        }
        .other-info {
            height: 42px;
        }
        .goods-name {
            padding: 10px 12px;
        }
    }
    .coupons {
        padding: 14px 12px;

        .text {
            width: 50px;
        }
        .coupons-item {
            overflow: hidden;
            > div {
                position: relative;
                height: 20px;
                line-height: 20px;
                padding: 0 9px;
                border-radius: 3px;
                box-sizing: border-box;
                color: #fff;
                background: $--color-primary;
                &::after,
                &::before {
                    content: "";
                    display: block;
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    left: -6px;
                    background-color: #fff;
                    border-radius: 50%;
                    border: 1px solid currentColor;
                    box-sizing: border-box;
                }
                &::after {
                    right: -7px;
                    left: auto;
                }
            }
        }
    }
    .evaluation {
        .title {
            height: 50px;
            border-bottom: $--border-base;
            padding: 0 12px;
        }
        .con {
            padding: 15px 12px;
        }
        .user-info {
            .avatar {
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }
        }
    }
    .bargain {
        .bargain-item {
            padding: 10px 12px;
            .bargain-btn {
                background: linear-gradient(90deg, #f95f2f 0%, #ff2c3c 100%);
                height: 29px;
                padding-left: 14px;
                padding-right: 14px;
                margin-left: 15px;
                box-shadow: 0px 3px 6px rgba(249, 47, 138, 0.4);
            }
        }
    }
    .details {
        line-height: 44px;
        text-align: center;
        .content {
            padding: 0 10px;
            /deep/img {
                display: block;
                width: 100%;
            }
        }
    }
    .footer {
        position: fixed;
        height: 50px;
        width: 100%;
        bottom: 0;
        left: 0;
        .btn {
            width: 50px;
            height: 100%;
            position: relative;
            .cart-num {
                background-color: $--color-primary;
                min-width: 15px;
                height: 15px;
                position: absolute;
                left: 30px;
                top: 3px;
                border-radius: 60px;
            }
        }
        .addcart,
        .right-buy {
            flex: 1;
            text-align: center;
            padding: 8px 0;
        }
        .addcart {
            background-color: $--color-yellow;
        }
        .right-buy {
            background-color: $--color-primary;
        }
    }
    .coupons-popup .title {
        padding: 15px;
    }
    .coupons-popup .content {
        height: 350px;
        overflow-x: auto;
    }
    .share-popup {
        .title {
            height: 50px;
        }
        img {
            width: 50px;
            height: 50px;
        }
        .share-tab {
            margin: 20px 0 70px;
        }
    }
    .code-popup {
        background-color: transparent;
        .content {
            width: 320px;
            height: 470px;
            .share-img {
                width: 100%;
                height: 100%;
                border-radius: 6px;
            }
        }
        .save-btn {
            height: 42px;
            border-radius: 4px;
        }
    }
    // 动画模块样式
    .shaking {
        animation: shake 1.5s 0.15s linear;
        -moz-animation: shake 1.5s 0.15s linear; /* Firefox */
        -webkit-animation: shake 1.5s 0.15s linear; /* Safari and Chrome */
        -o-animation: shake 1.5s 0.15s linear; /* Opera */
    }
    .goods-ball {
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.5s cubic-bezier(0.08, 0.27, 0.73, 0.95);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
    }
    .inner-ball {
        width: 100%;
        height: 100%;
        // animation: addCartScale 1s ease, throwIn .7s ease-out 1s;
    }
    .v-enter-active {
        transition: all 0.7s cubic-bezier(0, 0, 0, 0);
    }
    .v-enter {
        transform: translateX(-50%) scale(3);
        opacity: 0;
        left: 50%;
    }
    .v-enter-to {
        transform: translateX(-50%) scale(0.7);
        opacity: 1;
    }
    .v-leave-active {
       transition: all 0.5s cubic-bezier(0.08, 0.27, 0.73, 0.95);
    }
    .v-leave {
        transform: translateY(0);
        opacity: 1;
    }
    .v-leave-to {
        transform: scale(0.3);
        opacity: 0;
        left: 75px;
        top: calc(100vh - 100px);
    }
}
@-webkit-keyframes shake {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50%,
    100% {
        transform: rotate(0deg);
    }
}
@-moz-keyframes shake {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50%,
    100% {
        transform: rotate(0deg);
    }
}
@-o-keyframes shake {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50%,
    100% {
        transform: rotate(0deg);
    }
}
@keyframes shake {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50%,
    100% {
        transform: rotate(0deg);
    }
}
</style>
